<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css/baslider.css" type="text/css" />
</head>

<body>
	<div id="wrapper">
		<ul id="slider">
			<li class="current"><a href="#"><img src="images/pic1.jpg" alt="pic1" /></a></li>
			<li><a href="#"><img src="images/pic2.jpg" alt="pic2" /></a></li>
			<li><a href="#"><img src="images/pic3.jpg" alt="pic1" /></a></li>
			<li><a href="#"><img src="images/pic4.jpg" alt="pic2" /></a></li>
			<li><a href="#"><img src="images/pic5.jpg" alt="pic1" /></a></li>
			<li><a href="#"><img src="images/pic6.jpg" alt="pic2" /></a></li>
			<li><a href="#"><img src="images/pic7.jpg" alt="pic1" /></a></li>
			<li><a href="#"><img src="images/pic8.jpg" alt="pic1" /></a></li>
			<li><a href="#"><img src="images/pic9.jpg" alt="pic1" /></a></li>
		</ul>
		<div id="numControl"></div>
		<h1 id="header"></h1>
		<div id="intro">
			<span>BASlider</span> is a slider inspired by DDSlider, and does not contain any source code from anyother slider. Though my baby was born later than some others, it includes more effects than the olders and it also let user experiences the highly customizable properties of slider.
		</div>
		<div class="step">
			<h2>
				Step 1: HTML Markup
			</h2>
			<div class="code">
				<pre>
&lt;ul id="slider"&gt;
	&lt;li class="current"&gt;&lt;a href="#"&gt;&lt;img src="pic1.jpg" alt="pic1" /&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;&lt;img src="pic2.jpg" alt="pic2" /&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;&lt;img src="pic3.jpg" alt="pic1" /&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;&lt;img src="pic4.jpg" alt="pic2" /&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;&lt;img src="pic5.jpg" alt="pic1" /&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;&lt;img src="pic6.jpg" alt="pic2" /&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;&lt;img src="pic7.jpg" alt="pic1" /&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;&lt;img src="pic8.jpg" alt="pic1" /&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;&lt;img src="pic9.jpg" alt="pic1" /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
			</div>
		</div>
		
		<div class="step">
			<h2>
				Step 2: BASlider - jQuery + CSS
			</h2>
			<div class="code">
				<pre>
&lt;link rel="stylesheet" href="css/baslider.css" type="text/css" /&gt;
&lt;script type="text/javascript" src="jquery-1.4.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery.baslider.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
	$(document).ready(function(){
		$("#slider").baslider({
			"numeric": true,
			"numericId": "numControl",
			"auto":true
		},aO);  // aO is the animation Object Properties
	});
&lt;/script&gt;</pre>
			</div>
		</div>
		
		<div class="step">
			<h2>
				Step 3: BASlider Properties
			</h2>
			<div class="notice">
				<p>+ All You need is a separate javascript file contains the properties of each slide ( these properties is the ending value of each pieces of a slide. <em>Make sure</em> to make the slide hidden at the end of a slide by setting <em>height : 0px</em> or <em>opacity : 0</em>).</p>
				<p>+ Currently you only have to modify some properties of each slide in the template <a href="#" class="download">HERE</a></p>
			</div>
		</div>
		
		<div id="footer">
			<p>You can let it running wild now !!!</p>
			<p><a href="#">Download</a></p>
		</div>
	</div>
	
	<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="js/options.js"></script>
	<script type="text/javascript" src="js/jquery.baslider.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#slider").baslider({
				"numeric": true,
				"numericId": "numControl",
				"auto":true
			},aO);
		});
	</script>
</body>
</html>
